<template>
  <div id="lefft-bar">
    <scroll class="content">
      <ul>
        <li
          v-for="(item, index) in categorylist"
          :key="index"
          class="title-bar"
          :class="{ active: index === currentIndex }"
          @click="Active(index)">
          {{ item.title }}
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll";

export default {
  name: "CategoryLeftBar",
  components: {
    Scroll,
  },
  data() {
    return {
      isActive: false,
      currentIndex: 0,
      scroll: null,
    };
  },
  props: {
    categorylist: {
      type: Array,
      default: [],
    },
    
  },
  methods: {
    Active(index) {
      this.currentIndex = index;
      this.$emit("category-key",this.categorylist[index].maitKey, this.categorylist[index].miniWallkey)
    
      //切换数据从页面从最顶部开始 显示
      // this.$refs.rightDeteil.scrollTo();
      // console.log(this.$refs.rightDeteil);
    },
  },
};
</script>

<style scoped>
.title-bar {
  height: 44px;
  width: 80px;
  background-color: #eee;
  text-align: center;
  line-height: 44px;
}

.active {
  background-color: #fff;
  border-left: 3px solid rgb(228, 118, 138);
}

.content {
  height: calc(100% - 93px); 
  overflow: hidden;
}
</style>